<template>
    <div>
       <!-- 时间筛选条件 -->
       <div class="toolBox">
            <el-date-picker
                v-model="dateValue"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
            />
            <el-select v-model="doctorId" placeholder="请选择医生" clearable>
                <el-option
                    v-for="item, k in doctorList"
                    :key="k"
                    :label="item.name"
                    :value="item.id"
                />
            </el-select>
            <el-button type="primary" icon="el-icon-search" @click="getStatist">搜索</el-button>
            <el-button type="primary" icon="el-icon-download" @click="download" style="margin-left: auto;" :loading="btnLoading">导出</el-button>
        </div>
        <!-- 统计数据 -->
        <div class="cardBox" v-loading="totalLoading">
            <div v-for="item, k in countList" :key="k">
                {{ item.name }}
                <p><b>{{ totalData[item.field] || 0 }}</b></p>
            </div>
        </div>
        <!-- 表格数据 -->
        <el-table
            v-loading="tableLoading"
            :data="tableData.data"
            border
            stripe
            :header-cell-style="{backgroundColor: '#f5f7fa', color: '#000'}"
            height="calc(100vh - 357px)"
        >
            <el-table-column prop="name" align="center" label="患者名称" min-width="100" />
            <el-table-column prop="phone" label="电话" align="center" min-width="100" />
            <el-table-column align="center" label="体适能">
                <template slot-scope="scope">
                    {{ scope.row.bodytest ? '完成' : '未完成' }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="体适能复评">
                <template slot-scope="scope">
                    {{ scope.row.review_bodytest ? '完成' : '未完成' }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="心肺耐力">
                <template slot-scope="scope">
                    {{ scope.row.ergometry_cycle ? '完成' : '未完成' }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="心肺耐力复评" min-width="100">
                <template slot-scope="scope">
                    {{ scope.row.review_ergometry_cycle ? '完成' : '未完成' }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="医疗数据">
                <template slot-scope="scope">
                    {{ scope.row.edicaltest ? '完成' : '未完成' }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="医疗数据复评" min-width="100">
                <template slot-scope="scope">
                    {{ scope.row.review_edicaltest ? '完成' : '未完成' }}
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination 
            layout="total, sizes, prev, pager, next, jumper" 
            @size-change="handleSizeChange"
            @current-change="refreshPageRequest"
            :current-page="tableParam.page"
            :page-sizes="[10, 20, 50, 100, 200, 500, 1000]"
            :page-size="tableParam.list_rows"
            :total="tableData.total"
        />
    </div>
</template>
  
<script>
    import { getDoctorList, getPatientList, downLoadPatient, getDoctorStatist } from '@/api/detail';
    export default {
    data () {
        return {
            dateValue: '',
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const now = new Date();
                        const year = now.getFullYear();
                        const month = now.getMonth();
                        picker.$emit('pick', [new Date(year, month - 1, 1), new Date(year, month, 0)]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一年',
                    onClick(picker) {
                        const now = new Date();
                        const year = now.getFullYear();
                        const month = now.getMonth();
                        const day = now.getDate();
                        picker.$emit('pick', [new Date(year-1, month, day), new Date(year, month, day)]);
                    }
                }]
            },
            doctorId: '',
            doctorList: [],
            countList: [
                {name: '患者管理人数', field: 'patient_count'},
                {name: '体适能测评人数', field: 'bodytest'},
                {name: '体适能复评人数', field: 'bodytest_re'},
                {name: '心肺耐力初评人数', field: 'ergometry_cycle'},
                {name: '心肺耐力复评人数', field: 'ergometry_cycle_re'},
                {name: '医疗数据初填人数', field: 'edicaltest'},
                {name: '医疗数据复评人数', field: 'edicaltest_re'},
                {name: '管理人群运动总次数', field: 'sports'},
                {name: '管理人群有效分钟数', field: 'fa_burning'},
                {name: '管理人群力量次数', field: 'power'},
                {name: '管理人群干预有效人数', field: 'intervention'},
            ],
            totalData: {},
            tableData: {},
            totalLoading: false,
            tableLoading: false,
            btnLoading: false,
            tableParam: {
                page: 1,
                list_rows: 10,
                doctor_id: ''
            }
        }
    },
    created() {
        getDoctorList().then(res => this.doctorList = res)
        this.getStatist()
        this.getPatient()
    },
    watch: {
        'tableParam.doctor_id'() {
            this.refreshPageRequest(1)
        }
    },
    methods: {
        // 修改每页展示条数后刷新数据
        handleSizeChange(rows) {
            this.tableParam.list_rows = rows
            this.getPatient()
        },
        // 换页刷新
        refreshPageRequest(page) {
            this.tableParam.page = page
            this.getPatient()
        },
        // 获取患者列表数据
        async getPatient() {
            this.tableLoading = true
            await getPatientList(this.tableParam).then(res => this.tableData = res)
            setTimeout(() => {
                this.tableLoading = false
            }, 200)
        },
        // 获取统计数据
        async getStatist() {
            this.totalLoading = true
            this.tableParam.doctor_id = this.doctorId
            const params = {
                doctor_id: this.doctorId,
                wheretime: this.dateValue ? this.dateValue.join(',') : ''
            }
            await getDoctorStatist(params).then(res => this.totalData = res)
            setTimeout(() => {
                this.totalLoading = false
            }, 200)
        },
        // 导出文件
        async download() {
            this.btnLoading = true
            await downLoadPatient({doctor_id: this.doctorId})
            setTimeout(() => {
                this.btnLoading = false
            }, 200)
        }
    }
}
</script>

<style lang='less' scoped>
.cardBox {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    > div {
        box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.05);
        cursor: pointer;
        background: #fff;
        width: 160px;
        padding: 10px;
        border-radius: 5px;
        color: #777;
        p {
            margin-top: 5px;
            color: #000;
            b {
                font-size: 20px;
            }
        }
    }
}
/deep/ .el-pagination {
    text-align: right;
    padding: 15px 0 0 0;
}
</style>